<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content {
      margin: 150px auto;
      width: 900px;
    }
  </style>
</head>
<body>
  <div id="content1" class="content">
    i am content
  </div>
  <script id="test1" type="text/html">
    <h1>{{title}}</h1>
    <p>{{$data.name}}</p>
    <p>{{bbb.aaa}}</p>    
    <p>{{bbb['ccc']}}</p>
    <p>{{a ? "a is true" : "a is false"}}</p>
    <p>{{a || b}}</p>
    <p>{{c + d}}</p> 
    <p>{{h1}}</p>
    <p>{{@h11}}</p>
    {{set temp = "xxx"}}
    {{if temp}}
      {{temp}}      
    {{/if}}   

  </script>
  <script src="../js/lib/art-template.js"></script>
  <script src="../js/lib/jquery-2.1.1.js"></script>
  <script>    
    var data = {
      title: "i am title",
      name: "peter",
      bbb: {aaa: "AAA", ccc: "CCCC"},
      a: true,
      b: false,
      c: 10,
      d: 5,
      h1: '<h1>i am h1</h1>',
      h11: '<h1>i am h1</h1>',
    };
    var html = template('test1', data);
    $('#content1').append(html);

  </script>
</body>
</html>